<template>
  <view class="content">
    <view class="logo">
      <view style="border-radius: 10rpx; overflow: hidden">
        <u-image :show-loading="true" src="@/static/logo.jpg" width="120rpx" height="120rpx" v-if="appid == 'wx5725e443614a694e'"></u-image>
        <u-image :show-loading="true" src="@/static/logo2.png" width="140rpx" height="120rpx" v-if="appid == 'wx3fdf2ff306685408'"></u-image>
      </view>

      <!-- <view class="r_img">
      </view> -->
      <text style="margin-top: 20rpx" v-if="appid == 'wx5725e443614a694e'">欢迎使用批批采</text>
      <text style="margin-top: 20rpx" v-if="appid == 'wx3fdf2ff306685408'">欢迎使用批批折</text>
    </view>

    <view class="btns">
      <view style="color: #747474; font-size: 22rpx; display: flex; align-items: center; margin-top: 20rpx; margin-bottom: 20rpx">
        <u-checkbox-group v-model="value" placement="column" @change="checkboxChange">
          <u-checkbox :name="1" size="12" :customStyle="{ marginBottom: '8px' }" />
        </u-checkbox-group>

        我已阅读并同意
        <!-- <text class="blue" @click="openAgreement(0)">《用户协议》</text>
        和 -->
        <text class="blue" @click="openAgreement(1)">《批批采小程序隐私协议》</text>
      </view>
      <button v-if="value.length <= 0" @click="toast">
        <view class="use_btn">
          <!-- <u-image :show-loading="true" src="@/static/wechat_white.png" width="40rpx" height="40rpx"></u-image> -->
          <text style="margin-left: 10rpx">手机号快捷登录</text>
        </view>
      </button>

      <button v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
        <view class="use_btn">
          <!-- <u-image :show-loading="true" src="@/static/wechat_white.png" width="40rpx" height="40rpx"></u-image> -->
          <text style="margin-left: 10rpx">手机号快捷登录</text>
        </view>
      </button>
      <view class=""></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { nextTick, onBeforeMount, onMounted, reactive, ref, watch } from "vue";
import { getOrderData, doAuth, doWxAuth, getSiteAgreement } from "@/utils/api";

const appid = ref(uni.getAccountInfoSync().miniProgram.appId);
console.log("🚀 ~ uni.getAccountInfoSync():", uni.getAccountInfoSync());

function getPhoneNumber(phoneObj) {
  getWxCode(phoneObj.detail);
}

function getWxCode(phoneObj) {
  uni.login({
    success: (res) => {
      if (res.code) {
        //微信登录成功 已拿到code
        codeWx.value = res.code;

        // 获取用户信息
        uni.getUserInfo({
          provider: "weixin",
          success: (infoRes) => {
            console.log("🚀 ~ getWxCode ~ infoRes:", infoRes);
            doWxAuthFn(infoRes.userInfo, phoneObj);
          },
        });
      } else {
        console.log("登录失败！" + res.errMsg);
      }
    },
  });
}
const value = ref([]);
// 团长的id
const teamId = ref();
const emit = defineEmits(["authSuccess", "cancel"]);
const userInfo = ref({});
const codeWx = ref();
const isShowBindPhone = ref(false);
/**
 * 微信授权
 * @param userInfo
 */
async function doWxAuthFn(userInfo, phoneObj) {
  let { code, data } = await doWxAuth({
    user_info: JSON.stringify(userInfo),
    js_code: codeWx.value,
    encrypted_data: phoneObj.encryptedData,
    siv: phoneObj.iv,
    teamId: uni.getStorageSync("teamId"),
  });

  if (code == 200) {
    uni.setStorageSync("openId", data.openId);
    uni.setStorageSync("teamId", data.teamId);

    isShowBindPhone.value = false;
    emit("authSuccess", userInfo.value);
  }
}

function toast() {
  uni.showToast({
    title: "请先勾选同意协议",
    icon: "none",
  });
}

function openAgreement() {
  uni.openPrivacyContract();
}

function checkboxChange() {
  console.log("🚀 ~ checkboxChange ~ value:", value);
}
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 100vw;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 30rpx;
  font-weight: 700;
}

.r_img {
  width: 100rpx;
  height: 100rpx;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  // background-color: white;
  // box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: 0.5);
  margin-bottom: 20rpx;
}

.btns {
  margin-top: 250rpx;
  width: 70vw;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;

  button {
    background-color: transparent;
    padding: 30rpx 10rpx;
  }
}

.use_btn {
  display: flex;
  width: 500rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: #fff;
  background-color: #31c56b;
  border-radius: 20rpx;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: 0.2);
}

button:after {
  content: none;
  background-color: transparent;
}

button::after {
  border: none;
  background-color: transparent;
}
</style>
